<template>
	<div class="coach-detail">
		<div class="header">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in coachMienFile" :key="index">
					<img :src="item" class="swiper-item" />
				</swiper-item>
			</swiper>
		</div>
		<div class="main">
			<div class="coach-info">
				<div class="avatar"><img
						:src="portraitPictureFile ? portraitPictureFile : 'https://newmefit.cn/gym-center-2/1922227827956064256/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250513174951.png'">
				</div>
				<div class="info">
					<h3>{{ coachDetail.userName }}</h3>
					<uni-rate v-model="coachDetail.starLevel" :readonly="true" />
					<p>{{ storeName }}</p>
				</div>
			</div>
			<div class="coach-data">
				<p>身高：{{ coachDetail.stature ? coachDetail.stature : '' }}cm 体重：{{ coachDetail.weight ?
					coachDetail.weight : '' }}kg</p>
				<p style="display: flex;">教授课程：<em v-for="(item, index) in coachDetail.teachCourseList" :key="index">
						<span v-if="index < 2">{{ item.courseName }}</span>
						<span v-if="index == 2 && teachCourseList.length > 2">等{{ teachCourseList.length }}个教程</span>
					</em></p>
			</div>
			<h1>教练简介</h1>
			<div class="coach-desc">
				{{ coachDetail.introduce ? coachDetail.introduce : '暂无介绍' }}
			</div>
			 
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { coachDetailGet, getPublicUrl, listPublicUrl, coursePageList } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'
import { courseList, coachList } from './data'
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			rateValue: 2,
			coachDetail: {},
			portraitPictureFileId: '',
			portraitPictureFile: '',
			faceImageFileId: '',
			faceImageFile: '',
			coachMienFile: [
				'../../static/h3.jpg'
			],
			coachCertificateFile: [],
			teachCaseFile: [],
			storeName: '',
			teachCourseList: [],
			courseData: [],
			userId: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad(option) {
		this.getCoachDetail(option.userId)
	},
	methods: {
		previewImage(index, item) {
			uni.previewImage({
				current: index,
				urls: [item]
			})
		},
		// 获取推荐课程列表
		getCourseList() {
			var params = {
				current: 1,
				size: 1000,
				courseType: ''
			}
			coursePageList(params).then(res => {
				if (res.code == '200') {
					var data = res.data.records
					this.courseData = data
					this.getCoachDetail(this.userId)
				}
			})
		},
		getCoachDetail(userId) {
			
			for(let item of coachList){
				if(item.userId == userId){
					this.coachDetail = item
				}
			}

		}
	}
}
</script>

<style lang="scss">
.coach-detail {
	background: #fff;

	.header {
		width: 750rpx;
		height: 356rpx;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 450rpx;
			text-align: center;
		}
	}

	.main {
		width: 100%;
		min-height: 160rpx;
		box-shadow: 0rpx -10rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
		// border-radius: 0rpx 60rpx 0rpx 0rpx;
		padding: 32rpx 36rpx;
		box-sizing: border-box;
		background: #fff;
		// margin-top: -60rpx;
		position: relative;
		z-index: 10;

		.coach-info {
			display: flex;

			.avatar {
				width: 112rpx;
				height: 112rpx;

				img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info {
				margin-left: 20rpx;

				h3 {
					font-size: 30rpx;
					color: #1E1E1E;
					margin-bottom: 5rpx;
				}

				p {
					margin-top: 5rpx;
					margin-bottom: 19rpx;
					font-size: 24rpx;
					color: #838383;
				}
			}
		}

		.coach-data {
			width: 100%;
			height: 124rpx;
			background: #FFF1E9;
			border-radius: 10rpx;
			padding: 23rpx 28rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #1E1E1E;
			line-height: 44rpx;

			span {
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 12rpx;
				display: inline-block;
				background: rgba(255, 255, 255, 0);
				border-radius: 5rpx;
				border: 1px solid #FF7935;
				font-size: 22rpx;
				color: #FF5A20;
				margin-right: 10rpx;
			}
		}

		h1 {
			margin-top: 36rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			color: #1E1E1E;
		}

		.coach-desc {
			font-size: 26rpx;
			color: #575757;
			line-height: 38rpx;
		}

		.coach-img {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.img-item {
				width: 206rpx;
				height: 280rpx;
				line-height: 280rpx;
				background: #F7F7F7;
				border: 3px solid #E7E7E7;

				img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}
			}
		}

		.course-case {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.case-item {
				width: 100%;

				// text-align: center;
				img {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
}
</style>
